<div class="row">

  <div>
    <form class="form-horizontal" id="etlForm" name="etlForm" #form="ngForm">
      <div id="stepSwitch" #stepSwitch [ngSwitch]="getStep()">

        <!-- Step 1 - welcome screen and choice between new config and existing one -->
        <div class="stepZero" *ngSwitchCase="'1'">
          <h3 align="center"><b>EXTRACT - TRANSFORM - LOAD</b></h3><br>

          <!-- ETL LOGO -->
          <div class="row" name="etl-logo">
            <div class="col-md-2 col-md-offset-5">
              <img class="pointer" src="../../../img/cogs.png" width="70%" height="70%" style="display: block; margin: auto;"/>
            </div>
          </div>


          <div class="row">
            <!-- Configs quick fetching -->
            <div class="col-md-4">

              <div class="text-center" style="margin-top: 15%">
                <button class="btn btn-md btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false" id="loadDB2Configs">
                  Existing DB Configurations
                </button>

                <!-- Dropdown menu -->
                <div class="dropdown-menu dropdown-menu-center col-md-12">
                  <div id="db2configs">
                    <div class="row" *ngIf="configsFound()" style="margin: 7%;"><br>
                      <ul style="padding-left: 0%;">
                        <div id="liContainerOuter" *ngFor="let databaseName of objectKeys.transform(configsInfo)">
                          <li style="text-align: left; display: inline-block; white-space: nowrap;">
                            <span style="position: relative; left: 5px;">
                            <b>&bull; &nbsp;&nbsp;{{databaseName}}</b>
                            </span>
                            <ul style="margin: 10px; margin-bottom: 20px;">
                              <div id="liContainerInner" *ngFor="let configuration of configsInfo[databaseName]">
                                <li style="text-align: left; display: inline-block; white-space: nowrap;">
                                <span style="position: relative; left: 5px; display:block; width: 100px;">
                                <a (click)="loadConfigFromDB(configuration.config, configuration.configName)" style="cursor: pointer;" data-toggle="popover" data-trigger="hover"
                                   data-content="Load configuration" data-container="body">
                                  &bull; &nbsp;&nbsp;{{configuration.configName}}
                                </a>
                                </span>
                                </li>
                                <br/>
                              </div>
                            </ul>
                          </li><br/>
                        </div>
                      </ul>
                    </div>
                    <div class="row" *ngIf="!configsFound()" style="margin: 5%; text-align: center; ">
                      <h5>No configurations were found in any OrientDB database.</h5>
                    </div>
                  </div>
                </div>

              </div>
            </div>

            <div class="col-md-4">

              <div style="margin-top: 15%">

                <div class="text-center">
                  <button class="btn btn-md btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                          aria-expanded="false" id="loadOldConfigs">
                    Load json
                  </button>
                  <!-- Dropdown menu -->
                  <div class="dropdown-menu" style="max-height: 350px;">
                    <div id="page-wrapper"><br>
                      <div class="text-center">
                        <h4>Select a valid json file:</h4><br>
                        <div class="col-sm-5 col-sm-offset-1">
                          <input type="file" id="fileInput" (click)=previewFile()>
                        </div><br><br>

                        <textarea id="fileDisplayArea" style="height: 160px; width: 450px" class="form-control" readonly></textarea><br>
                        <div class="col-md-12 text-center">
                          <button class="btn btn-default btn-sm" (click)="oldConfigInit(oldConfig)"
                                  [disabled]="!importReady">Open</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div style="margin-top: 15%">
                <div class="text-center">
                  <button class="btn btn-md btn-primary" type="button" id="newConfig" (click)="setStep(2)">
                    New Configuration
                  </button>
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- Step 2 - source configuration -->
        <div class="stepOne" *ngSwitchCase="'2'">

          <div class="row">
            <div class="form-group">
              <div class="col-sm-offset-5 col-sm-7">
                <div class="btn-toolbar">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-primary" (click)="reset(1)">Home</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-primary" (click)="goToEditModules()" [disabled]="!form.valid">Edit modules</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-offset-1 col-md-11">
            <h4>Configuration</h4><br>
          </div>

          <div class="form-group">
            <label class="col-md-4 control-label">Configuration Name</label>
            <div class="col-md-4">
              <input type="text" id="configName" class="form-control" name="configName" [(ngModel)]="configName"
                     placeholder="Name for your configuration file" required/>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.configNameHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-4 control-label">Database Name</label>
            <div class="col-md-4">
              <input type="text" id="dbName" class="form-control" name="dbName" [(ngModel)]="outDBName"
                     placeholder="Database Name" required/>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.targetDBURLHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
          </div>

          <div class="col-md-offset-1 col-md-11">
            <h4>Source</h4><br>
          </div>

          <div class="form-group">
            <label class="col-md-4 control-label">Source Type</label>
            <div class="col-md-4">
              <select class="form-control" name="source" [(ngModel)]="sourcePrototype.source.value" required>
                <option *ngFor="let sourceType of sourcePrototype.source.types" [value]="sourceType"> {{sourceType}} </option>
              </select>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.sourceHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
          </div>

          <!-- URL configuration -->
          <div class="form-group" *ngIf="sourcePrototype.source.value == 'http'">
            <label class="col-md-4 control-label">Source File URL</label>
            <div class="col-md-4">
              <input type="url" id="fileURL" class="form-control" name="fileURL" [(ngModel)]="sourcePrototype.fileURL"
                     placeholder="URL of your file" pattern="https?://.+" required/>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.URLHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
            <br><br><br>
            <label class="col-md-4 control-label">HTTP Method</label>
            <div class="col-md-4">
              <select class="form-control" name="URLMethod" [(ngModel)]="sourcePrototype.URLMethod.value" required>
                <option *ngFor="let URLMethod of sourcePrototype.URLMethod.types" [selected]="URLMethod == 'GET'" [value]="URLMethod"> {{URLMethod}} </option>
              </select>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.URLMethodHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
            <br><br><br>
            <label class="col-md-4 control-label">HTTP Header</label>
            <div class="col-md-4">
              <input type="url" id="headers" class="form-control" name="headers" [(ngModel)]="sourcePrototype.headers.userAgent"
                     placeholder="header, if needed"/>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.headerHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
          </div>

          <!-- Local File configuration -->
          <div class="form-group" *ngIf="sourcePrototype.source.value == 'file'">
            <label class="col-md-4 control-label">File Path</label>
            <div class="col-md-4">
              <input type="text" id="filePath" class="form-control" name="filePath" [(ngModel)]="sourcePrototype.filePath"
                     placeholder="Local path of your file" required/>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.pathHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
            <br><br>
            <label class="col-md-4 control-label">File Locking</label>
            <div class="col-md-4">
              <label class="control-label">
                <input type="checkbox" name="fileLock" id="fileLock" class="checkbox" [(ngModel)]="sourcePrototype.fileLock" style="vertical-align: middle">
              </label>
            </div>
            <div class="col-md-4">
              <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                      [attr.data-content]="hints.lockHint"><i class="fa fa-question-circle"></i>
              </button>
            </div>
          </div>

          <div class="col-md-offset-1 col-md-11">
            <h4>Advanced Settings</h4><br>
          </div>

          <div class="form-group">
            <label class="col-md-4 control-label">Max Retries</label>
            <div class="col-md-4">
              <input type="number" min="0" step="1" id="maxRetries" class="form-control" name="maxRetries"
                     [(ngModel)]="config.maxRetries"/>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-4 control-label">Log Level</label>
            <div class="col-md-4">
              <select class="form-control" name="logLevel" [(ngModel)]="config.log" required>
                <option *ngFor="let logLevel of configPrototype.config.log.types" [value]="logLevel"> {{logLevel}} </option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-4 control-label">Halt on Error</label>
            <div class="col-md-1 control-label">
              <input type="checkbox" name="haltOnError" id="haltOnError" class="checkbox" [(ngModel)]="config.haltOnError">
            </div>
            <label class="col-md-2 control-label">Parallel Execution</label>
            <div class="col-md-1 control-label">
              <input type="checkbox" name="parallel" id="parallel" class="checkbox" [(ngModel)]="config.parallel">
            </div>
          </div>

        </div>

        <!-- Step 3 - Etl modules creation, configuration and sorting -->
        <div class="stepTwo" *ngSwitchCase="'3'">

          <div class="form-group">

            <div class="col-sm-offset-2 col-sm-3">
              <div class="btn-toolbar">
                <div class="btn-group">
                  <button *ngIf="outDBName" type="button" class="btn btn-sm btn-primary" (click)="saveConfiguration()">
                    Save Config
                  </button>
                  <div *ngIf="!outDBName" style="display: inline-block;"
                       data-toggle="popover" data-content="Add an OrientDB Loader in order to save the current ETL configuration."
                       data-container="body" data-trigger="hover" data-animation="am-fade-and-scale" data-placement="left">
                    <button type="button" class="btn btn-sm btn-primary" (click)="saveConfiguration()" style="pointer-events: none;" disabled>
                      Save Config
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-sm-offset-1 col-sm-3">
              <div class="btn-toolbar">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-primary" (click)="reset(3);">Home</button>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-primary" (click)="setStep(2, true)">Back</button>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-primary" (click)="launch()" [disabled]="!ready">Run Etl</button>
                </div>
              </div>
            </div>

          </div>

          <div class="col-md-8">
            <div class="panel panel-default" style="height:590px">
              <div class="panel-heading" align="center"><b>ETL OVERVIEW - CHOSEN SOURCE: {{sourcePrototype.source.value.toUpperCase()}}</b></div>
              <div class="panel-body">
                <div class="row">

                  <div class="col-sm-3">
                    <div class="col-sm-9" style="padding: 0px;">
                      <h4 align="left"><b>Extractor</b>
                        <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                                [attr.data-content]="hints.extractorHint" style="padding: 10px;"><i class="fa fa-question-circle"></i>
                        </button>
                      </h4>
                    </div>

                    <div class="col-sm-3 btn-group" style="margin-top: 10px;">
                      <button class="btn btn-primary btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false" id="createExtractor" style="border-radius: 15px;">
                        <b>+</b>
                      </button>
                      <!-- Dropdown menu, jdbc is shown only if selected as source -->
                      <div class="dropdown-menu">
                        <div class="list-group-item list-group-item-info">Extractor Type</div>
                        <button type="button" class="list-group-item list-group-item-action" (click)="extractorInit('jdbc')" *ngIf="sourcePrototype.source.value == 'jdbc'">jdbc</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="extractorInit('csv')" *ngIf="sourcePrototype.source.value != 'jdbc'">csv</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="extractorInit('json')" *ngIf="sourcePrototype.source.value != 'jdbc'">json</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="extractorInit('row')" *ngIf="sourcePrototype.source.value != 'jdbc'">row</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="extractorInit('xml')" *ngIf="sourcePrototype.source.value != 'jdbc'">xml</button>
                        <a class="list-group-item list-group-item-action flex-column align-items-start disabled" *ngIf="sourcePrototype.source.value == 'jdbc'">
                          <div class="d-flex w-100 justify-content-between">
                            <small>Hint:</small>
                          </div>
                          <p class="mb-1">You selected jdbc previously. You have to use a jdbc extractor.</p>
                          <small>Please make sure that your jdbc driver is in classpath or in lib folder.</small>
                        </a>
                      </div>
                    </div>

                    <div class="row" style="text-align:center;">
                      <br><br>
                      <div class="col-md-12" style="text-align: center;">
                        <h5 id="pleaseExtractor" align="center"><b>Please create an extractor</b></h5>
                        <div id="extractorSpace" style="height: 300px">
                          <canvas id="eCanvas" style="display:none" (click)="selectExtractor()">
                            Your browser does not support the HTML5 canvas tag.
                          </canvas>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-6 etl-transformers">
                    <div class="col-sm-10">
                      <h4 align="center"><b>Transformers</b>
                        <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                                [attr.data-content]="hints.transformerHint"><i class="fa fa-question-circle"></i>
                        </button>
                      </h4>
                    </div>
                    <div class="col-sm-2 btn-group" style="margin-top: 10px;">
                      <button class="btn btn-primary btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                              aria-expanded="false" id="createTransformer" style="border-radius: 15px;">
                        <b>+</b>
                      </button>
                      <!-- Dropdown menu -->
                      <div class="dropdown-menu">
                        <div class="list-group-item list-group-item-info">Transformer Type</div>

                        <!-- Csv transformer is deprecated -->
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('let')">let block</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('console')">console block</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('code')">code</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('command')">command</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('edge')">edge</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('flow')">flow</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('field')">field</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('link')">link</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('log')">log</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('merge')">merge</button>
                        <button type="button" class="list-group-item list-group-item-action" (click)="transformerInit('vertex')">vertex</button>
                      </div>
                    </div>

                    <div class="row" style="text-align:center;">
                      <br><br>

                      <!-- Canvas list generation area -->
                      <div class="col-md-12" style="overflow-y:auto; overflow-x: hidden">
                        <h5 id="pleaseTransformer" align="center"><b>Please create at least one transformer</b></h5>
                        <div id="transformerSpace" style="height: 450px">
                          <ol id="transformerList" #transformerList class="transformer-list list-unstyled">
                          </ol>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-sm-3">

                    <div class="col-sm-9" style="padding: 0px;">
                      <h4 align="center"><b>Loader</b>
                        <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                                [attr.data-content]="hints.loaderHint"><i class="fa fa-question-circle"></i>
                        </button>
                      </h4>
                    </div>

                    <div class="col-sm-3 btn-group" style="margin-top: 10px;">
                      <div class="btn-group">

                        <button class="btn btn-primary btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false" id="createLoader" style="border-radius: 15px;">
                          <b>+</b>
                        </button>
                        <!-- Dropdown menu -->
                        <div class="dropdown-menu">
                          <div class="list-group-item list-group-item-info">Loader Type</div>

                          <button type="button" class="list-group-item list-group-item-action" (click)="loaderInit('log')">log</button>
                          <button type="button" class="list-group-item list-group-item-action" (click)="loaderInit('orientdb')">OrientDB</button>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-12" style="text-align: center; padding-left: 0px;">
                      <h5 id="pleaseLoader" align="center"><b>Please create a loader</b></h5>
                      <div id="loaderSpace" style="height: 300px">
                        <canvas id="lCanvas" style="display:none" (click)="selectLoader()">
                          Your browser does not support the HTML5 canvas tag.
                        </canvas>
                      </div>
                    </div>
                    <br><br>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="panel panel-info" style="overflow:auto; height:590px">
              <div class="panel-heading" align="center"><b>PARAMETER CONFIGURATION</b></div>
              <div class="panel-body">
                <div id="panelPlaceholder" class="etl-panel"></div>

                <!-- Advanced configurations. The parameters are taken from the prototypes to avoid unknown/missing parameters during restore -->
                <!-- Extractor advanced configuration -->
                <div id="extractorOptions" style="display:none">

                  <div *ngIf="extractorType && extractor">
                    <h5 align="center"><b>{{extractorType.toUpperCase()}} EXTRACTOR OPTIONS</b></h5><br>
                    <div *ngIf="objectKeys.transform(extractorPrototype[extractorType]).length == 0">
                      <br><br><br><h6 align="center" style="color:red;">This module hasn't configurable parameters!</h6>
                    </div>

                    <div *ngFor="let eParameter of objectKeys.transform(extractorPrototype[extractorType]);">
                      <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                              [attr.data-content]="hints.extractor[eParameter]"><i class="fa fa-question-circle"></i>
                      </button>
                      <label *ngIf="extractorPrototype[extractorType][eParameter]['mandatory'] == true">
                        &emsp;{{separeCaps(eParameter).toUpperCase()}} <b style="color:red;">*</b>
                      </label>
                      <label *ngIf="extractorPrototype[extractorType][eParameter]['mandatory'] == false">
                        &emsp;{{separeCaps(eParameter).toUpperCase()}}
                      </label>

                      <select *ngIf="extractorPrototype[extractorType][eParameter]['types']" class="form-control"
                              name="eTypeConfig-{{eParameter}}" [(ngModel)]="extractor[extractorType][eParameter]" (ngModelChange)="readyForExecution()">
                        <option *ngFor="let eType of extractorPrototype[extractorType][eParameter]['types']" [value]="eType">
                          {{eType}}
                        </option>
                      </select>

                      <input *ngIf="extractorPrototype[extractorType][eParameter]['number']"
                             type="number" min="0" step="1" class="form-control" name="lTextConfig-{{lParameter}}"
                             [(ngModel)]="extractor[extractorType][eParameter]" placeholder="enter a number" (ngModelChange)="subReadyForExecution()"/>

                      <tag-input *ngIf="extractorPrototype[extractorType][eParameter]['array']" name="eTextConfig-{{eParameter}}"
                                 [(ngModel)]="extractor[extractorType][eParameter]" placeholder="new item" secondaryPlaceholder="enter new item"
                                 modelAsStrings="true" [separatorKeys]="[188]">
                      </tag-input>

                      <input *ngIf="!extractorPrototype[extractorType][eParameter]['types'] && !extractorPrototype[extractorType][eParameter]['array']
                             && !extractorPrototype[extractorType][eParameter]['number']"
                             type="text" class="form-control" name="eTextConfig-{{eParameter}}" [(ngModel)]="extractor[extractorType][eParameter]"
                             placeholder="enter your value" (ngModelChange)="readyForExecution()"/>
                      <br>

                    </div>
                  </div><br><br>
                  <div class="col-md-12 text-center">
                    <div class="btn-group">
                      <button id="deleteExtractor" type="button" class="btn btn-xs btn-danger" style="border-radius: 40px;" (click)="deleteExtractor()">Delete Extractor</button>
                    </div>
                  </div>
                </div>

                <!-- Transformer advanced configuration -->
                <div id="transformerOptions" style="display:none">

                  <div *ngIf="getTransformerType(currentTransformer) && transformers">
                    <h5 align="center"><b>{{getTransformerType(currentTransformer).toUpperCase()}} TRANSFORMER OPTIONS</b></h5><br>
                    <div *ngIf="objectKeys.transform(transformerPrototype[getTransformerType(this.currentTransformer)]).length == 0">
                      <br><br><br><h6 align="center" style="color:red;">This module hasn't configurable parameters!</h6>
                    </div>

                    <div *ngFor="let tParameter of objectKeys.transform(transformerPrototype[getTransformerType(this.currentTransformer)])">
                      <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                              [attr.data-content]="hints.transformer[tParameter]"><i class="fa fa-question-circle"></i>
                      </button>
                      <label *ngIf="transformerPrototype[getTransformerType(currentTransformer)][tParameter]['mandatory'] == true">
                        &emsp;{{separeCaps(tParameter).toUpperCase()}} <b style="color:red;">*</b>
                      </label>
                      <label *ngIf="transformerPrototype[getTransformerType(currentTransformer)][tParameter]['mandatory'] == false">
                        &emsp;{{separeCaps(tParameter).toUpperCase()}}
                      </label>

                      <select *ngIf="transformerPrototype[getTransformerType(currentTransformer)][tParameter]['types']" class="form-control"
                              name="tTypeConfig-{{tParameter}}" [(ngModel)]="currentTransformer[getTransformerType(currentTransformer)][tParameter]"
                              (ngModelChange)="readyForExecution()">
                        <option *ngFor="let tType of transformerPrototype[getTransformerType(currentTransformer)][tParameter]['types']" [value]="tType">
                          {{tType}}
                        </option>
                      </select>

                      <textarea *ngIf="!transformerPrototype[getTransformerType(currentTransformer)][tParameter]['types']" rows="2" type="text" class="form-control"
                                name="tTextConfig-{{tParameter}}" [(ngModel)]="currentTransformer[getTransformerType(currentTransformer)][tParameter]"
                                placeholder="enter your value" (ngModelChange)="readyForExecution()" style="resize: vertical"></textarea>

                      <br>

                    </div>
                  </div><br><br>
                  <div class="col-md-12 text-center">
                    <div class="btn-group">
                      <button id="deleteTransformer" type="button" class="btn btn-xs btn-danger" style="border-radius: 40px;" (click)="deleteTransformer()">Delete Transformer</button>
                    </div>
                  </div>
                </div>

                <!-- Loader advanced configuration -->
                <div id="loaderOptions" style="display:none">

                  <div *ngIf="loaderType && loader">
                    <h5 align="center"><b>{{loaderType.toUpperCase()}} LOADER OPTIONS</b></h5><br>
                    <div *ngIf="objectKeys.transform(loaderPrototype[loaderType]).length == 0">
                      <br><br><br><h6 align="center" style="color:red;">This module hasn't configurable parameters!</h6>
                    </div>

                    <div *ngIf="loaderType==='orientdb'">
                      <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                              [attr.data-content]="hints.loader.connectionProtocol"><i class="fa fa-question-circle"></i>
                      </button>
                      <label>
                        &emsp;CONNECTION PROTOCOL <b style="color:red;">*</b>
                      </label>
                      <select class="form-control" [(ngModel)]="connectionProtocol" name="protocol" required>
                        <option *ngFor="let protocol of protocols" [value]="protocol"> {{protocol}} </option>
                      </select>
                    </div>

                    <div *ngIf="loaderType==='orientdb'">
                      <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                              [attr.data-content]="hints.loader.connectionProtocol"><i class="fa fa-question-circle"></i>
                      </button>
                      <label>
                        &emsp;DATABASE NAME <b style="color:red;">*</b>
                      </label>
                      <input type="text" id="outDBName" class="form-control" name="outDBName" [(ngModel)]="outDBName" (ngModelChange)="readyForExecution()"
                             placeholder="Database Name" required ngControl="hostControl"/>
                    </div>

                    <br>

                    <div *ngFor="let lParameter of objectKeys.transform(loaderPrototype[loaderType])">

                      <div *ngIf="lParameter !== 'dbURL'">

                        <button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                                [attr.data-content]="hints.loader[lParameter]"><i class="fa fa-question-circle"></i>
                        </button>
                        <label *ngIf="loaderPrototype[loaderType][lParameter]['mandatory'] == true">
                          &emsp;{{separeCaps(lParameter).toUpperCase()}} <b style="color:red;">*</b>
                        </label>
                        <label *ngIf="loaderPrototype[loaderType][lParameter]['mandatory'] == false">
                          &emsp;{{separeCaps(lParameter).toUpperCase()}}
                        </label>

                        <select *ngIf="loaderPrototype[loaderType][lParameter]['types']"
                                class="form-control" name="lTypeConfig-{{lParameter}}" [(ngModel)]="loader[loaderType][lParameter]">
                          <option *ngFor="let lType of loaderPrototype[loaderType][lParameter]['types']" [value]="lType" (ngModelChange)="readyForExecution()">
                            {{lType}}
                          </option>
                        </select>

                        <input *ngIf="loaderPrototype[loaderType][lParameter]['number']"
                               type="number" min="0" step="1" class="form-control" name="lTextConfig-{{lParameter}}"
                               [(ngModel)]="loader[loaderType][lParameter]" placeholder="enter a number" (ngModelChange)="readyForExecution()"/>

                        <input *ngIf="!loaderPrototype[loaderType][lParameter]['types'] && !loaderPrototype[loaderType][lParameter]['object']
                             && !loaderPrototype[loaderType][lParameter]['number']"
                               type="text" class="form-control" name="lTextConfig-{{lParameter}}" [(ngModel)]="loader[loaderType][lParameter]"
                               placeholder="enter your value" (ngModelChange)="readyForExecution()"/>

                        <!-- Objects creation (classes and indexes) -->
                        <div *ngIf="loaderPrototype[loaderType][lParameter]['object']">
                          <h6 style="color:grey;"><b>Created {{lParameter}}: {{loader[loaderType][lParameter].length}}</b>

                            <!-- Lists every object in both the arrays -->
                            <div class="btn-group">
                              <button class="btn btn-trasparent btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                                      aria-expanded="false" id="show{{lParameter}}"><i class="fa fa-chevron-down"></i>
                              </button>
                              <!-- Dropdown list -->
                              <div class="dropdown-menu" style="width: 200px">
                                <div class="list-group-item" *ngFor="let object of loader[loaderType][lParameter]">
                                  <div *ngFor="let property of objectKeys.transform(object)">
                                    <b>{{property}}:</b> {{object[property]}} <br>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </h6>

                          <div *ngFor="let oParameter of objectKeys.transform(loaderPrototype[loaderType][lParameter]['value'])">
                            &emsp;&emsp;<button type="button" class="btn btn-trasparent" data-toggle="popover" data-html="true"
                                                [attr.data-content]="hints.loader[oParameter]"><i class="fa fa-question-circle"></i>
                          </button>
                            <label *ngIf="loaderPrototype[loaderType][lParameter]['value'][oParameter]['mandatory'] == true">
                              &emsp;{{oParameter}} <b style="color:red;">*</b>
                            </label>
                            <label *ngIf="loaderPrototype[loaderType][lParameter]['value'][oParameter]['mandatory'] == false">
                              &emsp;{{oParameter}}
                            </label>
                            <div class="col-md-offset-1 col-md-11">
                              <input *ngIf="!loaderPrototype[loaderType][lParameter]['value'][oParameter]['array'] &&
                             !loaderPrototype[loaderType][lParameter]['value'][oParameter]['number']"
                                     type="text" class="form-control" name="lTextConfig-{{lParameter}}-{{oParameter}}"
                                     [(ngModel)]="this[lParameter][oParameter]" placeholder="enter your value"
                                     (ngModelChange)="subReadyForExecution()"/>

                              <input *ngIf="loaderPrototype[loaderType][lParameter]['value'][oParameter]['number']"
                                     type="number" min="0" step="1" class="form-control" name="lTextConfig-{{lParameter}}"
                                     [(ngModel)]="this[lParameter][oParameter]" placeholder="enter a number" (ngModelChange)="subReadyForExecution()"/>

                              <tag-input *ngIf="loaderPrototype[loaderType][lParameter]['value'][oParameter]['array']"
                                         name="lTextConfig-{{lParameter}}-{{oParameter}}" [(ngModel)]="this[lParameter][oParameter]"
                                         (onAdd)="subReadyForExecution()" (onRemove)="subReadyForExecution()" placeholder="new item"
                                         secondaryPlaceholder="enter new item" modelAsStrings="true" [separatorKeys]="[188]">
                              </tag-input>
                            </div>
                          </div>
                          <br><br><br>
                          <div class="btn-group-xs">
                            &emsp;&emsp;&emsp;
                            <button type="button" class="btn btn-xs btn-info" style="border-radius: 40px;" (click)="loaderDeleteLast(lParameter)">
                              Remove last
                            </button>
                            &emsp;
                            <button *ngIf="lParameter === 'classes'" type="button" class="btn btn-xs btn-info" style="border-radius: 40px;" (click)="loaderAddTo(lParameter)"
                                    [disabled]="!classReady" [ngClass]="{'btn-danger': classReady}">
                              Add to {{lParameter}}
                            </button>
                            <button *ngIf="lParameter === 'indexes'" type="button" class="btn btn-xs btn-info" style="border-radius: 40px;" (click)="loaderAddTo(lParameter)"
                                    [disabled]="!indexReady" [ngClass]="{'btn-danger': indexReady}">
                              Add to {{lParameter}}
                            </button>
                          </div><br>
                        </div>
                        <br>
                      </div>
                    </div>
                  </div><br><br>
                  <div class="col-md-12 text-center">
                    <div class="btn-group">
                      <button id="deleteLoader" type="button" class="btn btn-xs btn-danger" style="border-radius: 40px;" (click)="deleteLoader()">Delete Loader</button>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>

        </div>

        <!-- Step 4 - execution, logging and source inspection -->
        <div class="stepThree" *ngSwitchCase="'running'">
          <h4>
            <div class="row">
              <div class="col-md-6">
                <span>&nbsp;&nbsp;&nbsp;Migration to OrientDB</span>
              </div>
            </div>
          </h4><br/><br/>

          <div class="row ">
            <div class="col-md-10" *ngIf="job.cfg">
              <div class="studio-well-tips-sm col-md-6">
                <h5>
            <span class="tab">
              <b> Status</b>: {{ job.status }}
            </span>
                </h5>
                <h5>
            <span *ngIf="source.file" class="tab">
               <b>From File</b>: {{ source.file.path }}
            </span>
                  <span *ngIf="source.http" class="tab">
               <b>From HTTP URL</b>: {{ source.http.url }}
            </span>
                  <span *ngIf="!source && extractor.jdbc" class="tab">
               <b>From JDBC</b>: {{ extractor.jdbc.url }}
            </span>
                </h5>
                <h5>
            <span class="tab">
              <b>To</b>: {{job.cfg.protocol}}:$ORIENTDB_HOME/databases/{{job.cfg.outDBName}}
            </span>
                </h5>
              </div>
            </div>
            <div class="col-md-2">
              <div class="btn-group">
                <button type="button" class="btn btn-md btn-primary" (click)="reset(4)" [disabled]="jobRunning">New Migration</button>
              </div>
            </div>
          </div>
          <div class="row row-space-2x">
            <div class="col-md-12">
              <textarea  #logArea class="form-control" id="logArea" name="logArea" [(ngModel)]="job.log"
                         rows="15" readonly style="height: 400px;"></textarea>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12"></div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
